<template>
	<div class="border-1px border-#E5E6EB border-solid rounded-12px p-20px">
		<p class="text-24px text-#000000 mb-20px">投资组合</p>
		<div class="flex items-center justify-between">
			<div class="w-40%">
				<div v-for="(item, index) in dataList.left" :key="index" class="flex items-center w-100% justify-between"
					:class="{ 'mb-20px': index == 0 }">
					<div class="flex items-center">
						<img :src="item.icon" class="mr-20px">
						<p>{{ item.title }}</p>
					</div>
					<p class="mr-50px">{{ item.sum }}</p>
				</div>
			</div>
			<el-divider direction="vertical" />
			<div class="w-40%">
				<div v-for="(item, index) in dataList.right" :key="index" class="flex items-center w-100% justify-between"
					:class="{ 'mb-20px': index == 0 }">
					<div class="flex items-center">
						<img :src="item.icon" class="mr-20px">
						<p>{{ item.title }}</p>
					</div>
					<p class="mr-50px">{{ item.sum }}</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
const dataList = ref<any>({
	left: [
		{
			icon: '/person/portfolio-1.svg',
			title: '资金账户',
			sum: '0.00 USDT'
		},
		{
			icon: '/person/portfolio-2.svg',
			title: '现货账户',
			sum: '0.00 USDT'
		}
	],
	right: [
		{
			icon: '/person/portfolio-3.svg',
			title: '合约账户',
			sum: '0.00 USDT'
		},
		{
			icon: '/person/portfolio-4.svg',
			title: '理财账户',
			sum: '0.00 USDT'
		}
	]
})
</script>
<style lang="scss" scoped>
	.el-divider--vertical{
		height: 80px;
	}
</style>
